import { useState } from "react";

import { Text, View } from "@tarojs/components";
import PopupDate from "./PopupDate";
import ByButton from "@/components/ui/ByButton";
import ByPopupBottom from "@/components/ui/ByPopupBottom";

import { useReactive } from "ahooks";
import dayjs from "dayjs";

type Props = {
  value: [string, string];
  onConfirm?: (event: string[]) => void;
};

const current = dayjs();
const valueDefaults = [
  current.format("YYYY-MM-DD"),
  current.add(1, "day").format("YYYY-MM-DD"),
];

export default ({ value, onConfirm }: Props) => {
  //0 开始，1结束
  const [step, setStep] = useState(0);

  const range = useReactive([
    value[0] || valueDefaults[0],
    value[1] || valueDefaults[1],
  ]);

  // 确认
  const handleConfirm = () => onConfirm?.([...range]);

  return (
    <>
      <ByPopupBottom title="选择时间">
        <View className="relative px-6 z-10">
          <Text
            className={`py-1 border-b-[6px] ${
              step == 0 ? "border-primary" : "border-transparent"
            }`}
            onClick={() => setStep(0)}
          >
            开始时间
          </Text>
          <Text
            className={`py-1 ml-4 border-b-[6px] ${
              step == 1 ? "border-primary" : "border-transparent"
            }`}
            onClick={() => setStep(1)}
          >
            结束时间
          </Text>
        </View>
        <View className="overflow-hidden h-[500px]">
          {step == 1 ? (
            <PopupDate
              key={"start"}
              value={range[1]}
              onChange={(e) => (range[1] = e)}
            />
          ) : (
            <PopupDate
              key={"end"}
              value={range[0]}
              onChange={(e) => (range[0] = e)}
            />
          )}
        </View>
        <View className="py-4 text-center">
          <ByButton
            className="w-1/3 ml-4"
            type="primary"
            size="large"
            disabled={range.length == 2}
            onClick={handleConfirm}
          >
            确定
          </ByButton>
        </View>
      </ByPopupBottom>
    </>
  );
};
